<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/params' }"
        >分类参数</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="main">
      <el-alert
        style="background-color: sandybrown; color: #fff"
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        :closable="false"
        show-icon
      >
      </el-alert>
      <div class="displays">
        <el-form>
          <el-form-item label="选择商品分类:">
            <el-cascader
              :options="options"
              :props="props"
              v-model="FormOptions.cat_id"
              clearable
              @change="Optionslist"
              prop="cat_id"
            ></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <template>
        <el-tabs type="border-card" @tab-click="dongtai">
          <el-tab-pane label="动态参数">
            <el-button
              type="primary"
              :disabled="indexs != 0 ? false : true"
              @click="AddParams"
              >添加参数</el-button
            >
            <el-table
              border
              style="width: 100%; margin: 20px 0"
              :data="tableData"
            >
              <el-table-column prop="" type="expand" label="" width="60">
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                      <el-input
                        v-model="input"
                        placeholder="+new Tag"
                        class="el-index"
                      ></el-input></div
                  ></el-col>
                </el-row>
              </el-table-column>
              <el-table-column
                prop="attr_id"
                v-model="attrid"
                label="#"
                width="60"
              >
              </el-table-column>
              <el-table-column prop="attr_name" label="参数名称">
              </el-table-column>
              <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" @click="UpDates(scope.row)">
                    <i class="el-icon-edit"></i>
                    修改
                  </el-button>
                  <el-button type="danger" @click="deleteAdd(scope.row)">
                    <i class="el-icon-delete-solid"></i>删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="静态属性">
            <el-button
              type="primary"
              :disabled="indexs != 0 ? false : true"
              @click="Addparamsjin"
              >添加属性</el-button
            >
            <el-table
              border
              style="width: 100%; margin: 20px 0"
              :data="tableData"
            >
              <el-table-column prop="" type="expand" label="" width="60">
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                      <el-input
                        v-model="input"
                        placeholder="+new Tag"
                        class="el-index"
                      ></el-input></div
                  ></el-col>
                </el-row>
              </el-table-column>
              <el-table-column prop="attr_id" label="#" width="60">
              </el-table-column>
              <el-table-column prop="attr_name" label="属性名称">
              </el-table-column>
              <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" @click="UpDatess(scope.row)">
                    <i class="el-icon-edit"></i>
                    修改</el-button
                  >
                  <el-button type="danger" @click="deleteAdds(scope.row)">
                    <i class="el-icon-delete-solid"></i>删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
    <!-- 修改用户信息 -->
    <el-dialog title="编辑用户" :visible.sync="upDateFormVisible">
      <el-form :model="formselet" :rules="rules">
        <el-form-item label="用户名" prop="attr_name">
          <el-input
            v-model="formselet.attr_name"
            class="inputs"
            autocomplete="on"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upDateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatalist">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加动态参数 -->
    <el-dialog
      :title="indexss != 1 ? '添加动态参数' : '编辑静态参数'"
      :visible.sync="AddFormVisible"
    >
      <el-form :model="addDate" :rules="rules">
        <el-form-item
          :label="indexss != 1 ? '动态参数' : '静态参数'"
          prop="attr_name"
        >
          <el-input
            v-model="addDate.attr_name"
            class="inputs"
            autocomplete="on"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="AddFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  GoodsUesr,
  ParamsLsit,
  deleteList,
  putUpdatalist,
  addParams,
} from "../../api/index";
export default {
  name: "",
  data() {
    return {
      input: "",
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
      props: {
        value: "cat_id",
        label: "cat_name",
      },
      FormOptions: {
        cat_id: 0,
      },
      sel: "only",
      id: 0,
      attrid: 0,
      indexs: 0,
      indexss: 1,
      upDateFormVisible: false,
      AddFormVisible: false,
      tableData: [],
      dialogFormVisible: false, //显示隐藏添加用户按钮
      formselet: {
        attr_name: "",
        attrid: 0,
      },
      addDate: {
        attr_name: "",
      },
      rules: {
        attr_name: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.Optionslist();
    this.getOption();
  },
  methods: {
    async dongtai(tab) {
      if (tab.index == "0") {
        this.sel = "only";
        let {
          data,
          meta: { status },
        } = await ParamsLsit(this.id, { sel: this.sel });
        if (status == 200) {
          this.tableData = data;
        }
      } else if (tab.index == "1") {
        this.sel = "many";

        let {
          data,
          meta: { status },
        } = await ParamsLsit(this.id, { sel: this.sel });
        if (status == 200) {
          this.tableData = data;
        }
      }
    },
    // 删除按钮
    async deleteAdd(row) {
      let attrid = row.attr_id;
      let res = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (res) {
        let {
          meta: { status, msg },
        } = await deleteList(this.id, attrid);
        if (status == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.Optionslist();
        }
      } else {
        this.$message({
          type: "info",
          message: "取消删除!",
        });
      }
    },
    async deleteAdds(row) {
      let attrid = row.attr_id;
      let res = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (res) {
        let {
          meta: { status, msg },
        } = await deleteList(this.id, attrid);
        if (status == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.Optionslist();
        }
      } else {
        this.$message({
          type: "info",
          message: "取消删除!",
        });
      }
    },
    // 修改数据
    UpDatess(row) {
      this.upDateFormVisible = true;
      this.formselet.attr_name = row.attr_name;
      this.formselet.attrid = row.attr_id;
    },
    UpDates(row) {
      this.upDateFormVisible = true;
      this.formselet.attr_name = row.attr_name;
      this.formselet.attrid = row.attr_id;
    },
    async updatalist() {
      let obj = {
        id: this.id,
        attrid: this.formselet.attrid,
        attr_name: this.formselet.attr_name,
        attr_sel: this.sel,
        attr_vals: "adc",
      };
      // console.log(obj);
      let res = await putUpdatalist(obj);
      // console.log(res);
      this.Optionslist();
      this.upDateFormVisible = false;
    },
    async getOption() {
      let { data } = await GoodsUesr({ type: "3" });
      this.options = data;
    },
    // 下拉列表渲染
    async Optionslist() {
      if (this.FormOptions.cat_id.length < 3) {
        this.$message.warning({ message: "只允许为第三级分类设置相关参数！" });
        this.FormOptions.cat_id = "";
      }

      this.id = this.FormOptions.cat_id[2];
      let {
        data,
        meta: { status },
      } = await ParamsLsit(this.id, { sel: this.sel });
      if (status == 200) {
        this.tableData = data;
        this.indexs = 1;
      }
    },
    AddParams() {
      this.indexss = 2;
      // this.addDate.attr_name
      this.AddFormVisible = true;
    },
    Addparamsjin() {
      this.indexss = 1;
      this.AddFormVisible = true;
    },
    async queding() {
      let obj = {
        id: this.id,
        attr_name: this.addDate.attr_name,
        attr_sel: this.sel,
        attr_vals: this.sel,
      };
      console.log(obj);
      let {
        meta: { status, msg },
      } = await addParams(obj);

      if (status == 201) {
        this.$message.success({ message: msg });
        this.Optionslist();
      } else {
        this.$message.info({ message: "已取消删除" });
      }
      this.AddFormVisible = false;
    },
  },
};
</script>
<style scoped lang='css'>
.el-breadcrumb {
  background-color: #eaedf1;
}

.main {
  padding: 25px;
  background-color: #fff;
  height: auto;
}
.block {
  display: flex;
}
el-form-item {
  width: 100px;
}
.formuser {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  height: 200px;
}
.span {
  display: flex;
}
.el-select {
  display: flex;
  width: 200px;
}
.el-breadcrumb {
  padding-left: 0;
}
.el-alert {
  padding: 15px;
  margin-bottom: 20px;
  background-color: sandybrown;
}
.inputs {
  width: 85%;
}
.bg-purple-dark {
  display: flex;
  align-content: center;
}
.el-index {
  width: 100px;
  line-height: 30px;
  height: 25px;
  size: 12px;
  color: rgb(128, 114, 114);
  margin-bottom: 15px;
}
</style>